<template>
    <div v-if="list">
        <van-sticky :offset-top="0">
            <van-nav-bar
                title="分类"
                left-arrow
                @click-left="onClickLeft"
            />
            <van-tabbar v-model="active" :fixed="false" active-color="#ea413c" >
                <van-tabbar-item @click="hankmo">默认</van-tabbar-item>
                <van-tabbar-item @click="hankxiao(3)">销量</van-tabbar-item>
                <van-tabbar-item @click="hankprice">价格</van-tabbar-item>
                <div class="icon">
                    <van-icon name="arrow-up" size="12px" :class="{'van-icon-up':liang}" />
                    <van-icon style="top:7px;left:-12px;" :class="{'van-icon-up':mie}" name="arrow-down" size="12px" />
                </div>
            </van-tabbar>
        </van-sticky>
        <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check='false'
        finished-text="没有更多了"
        @load="onLoad"
        >
        <ul>
            <li @click="toDetail(data.productId)" v-for="data in list" :key="data.index" >
            <img :src="data.image" alt="">
            <div class="name">{{data.name}}</div>
            <div class="desc">{{data.desc}}</div>
            <div class="price">￥ {{data.salePrice | relaPrice}}</div>
            </li>
        </ul>
        </van-list>
    </div>
</template>
<script>
import http from '@/util/http'
import { mapActions, mapMutations, mapState } from 'vuex'
import Vue from 'vue'
import { NavBar, Tabbar, TabbarItem, Icon, Sticky, List } from 'vant'

Vue.use(Tabbar).use(TabbarItem).use(NavBar).use(Icon).use(Sticky).use(List)
export default {
  data () {
    return {
      active: 0,
      cuttor: 1,
      finished: false,
      loading: false,
      list: null,
      num: 1,
      count: 0,
      ssort: true,
      nowssort: '',
      liang: false,
      mie: false
    }
  },
  created () {
    this.hideAsides()
  },
  computed: {
    ...mapState(['indexListData', 'totalCount', 'isAsidesShow'])
  },
  mounted () {
    // console.log(this.indexListData)
    this.getdata()
  },
  destroyed () {
    this.setClearData()
    // console.log(this.indexListData)
  },
  methods: {
    ...mapActions(['getIndexListData']),
    ...mapMutations(['setClearData', 'setIndexData', 'showAsides', 'hideAsides', 'setIndexPage']),
    getdata () {
      if (!this.indexListData.length) {
        this.getIndexListData(this.$route.query.id).then(res => {
          this.list = this.indexListData
          this.count = this.totalCount
        })
      }
    },
    getxdata () {
      http({
        url: `/heihei/api/product/product/product_list?c=h5&s=20000&t=1605182954406&v=1.0&category_id=${this.$route.query.id}&sort_field=${this.num}&sort_order=2&pn=1&ps=6`
      }).then(res => {
        this.list = res.data.data.pageList
        this.setIndexPage(res.data.data.totalCount)
      })
    },
    toDetail (id) {
      this.$router.push({
        path: '/pages/detail/detail',
        query: {
          id: id
        }
      })
    },
    onClickLeft () {
      this.setClearData()
      this.showAsides()
      this.$router.push('/h5/pages/home/index')
    },
    onLoad () {
    //   console.log(this.list.length, this.list, this.num)
      if (this.list.length === 0) {
        this.loading = false
        return
      }
      if (this.list.length === this.totalCount) {
        // console.log(this.list.length)
        this.finished = true// 请求结束，禁用懒加载
        return
      }
      this.cuttor++
      http({
        url: `/heihei/api/product/product/product_list?c=h5&s=20000&t=1605163519340&v=1.0&category_id=${this.$route.query.id}&sort_field=${this.num}&sort_order=2&pn=${this.cuttor}&ps=6`
      }).then(res => {
        this.loading = false
        this.list = [...this.list, ...res.data.data.pageList]
        if (this.num === 1) {
          this.setIndexData(res.data.data.pageList)
          this.setIndexPage(this.count)
        }
        if (this.num === 2) {
          this.setIndexData(res.data.data.pageList)
          this.setIndexPage(this.count)
          this.list.sort(this.paixu('salePrice'))
        }
      })
    },
    hankmo () {
      this.num = 1
      document.documentElement.scrollTop = 0
      this.list = this.indexListData
      this.ssort = true
      this.liang = false
      this.mie = false
    },
    hankprice () {
      if (this.liang) {
        this.liang = false
        this.mie = true
      } else {
        this.liang = true
        this.mie = false
      }

      document.documentElement.scrollTop = 0
      this.num = 2
      this.list = [...this.indexListData]
      this.nowssort = this.ssort
      // this.list.sort(this.paixu('salePrice'))
      // alert(typeof bool)
      // console.log(this.indexListData)
      this.list.sort(this.paixu('salePrice'))
      this.ssort = !this.ssort
    },
    hankxiao (num) {
      if (this.num === num) {
        return
      }
      this.liang = false
      this.mie = false
      this.ssort = true
      this.num = num
      this.cuttor = 1
      this.list = []
      this.loading = true
      this.finished = false
      if (this.loading) {
        this.onLoad()
      }
      this.getxdata()
    },
    paixu (data) {
      return (a, b) => {
        if (this.nowssort) {
          return a[data] - b[data]
        }
        return b[data] - a[data]
      }
    }
  },
  filters: {
    relaPrice (price) {
      return price / 100
    }
  }
}
</script>
<style lang="scss" scoped>
    .icon{
        position: absolute;
        right: 25px;
        top: 16px;
    }
ul{
    display: flex;
    flex-wrap:wrap;
    li{
        width: 50%;
        padding: 0 5px;
        margin-bottom: 15px;
        img{
            width: 178px;
            height: 178px;
        }
        .name,.desc{
            font-size: 14px;
            width: 100%;
            color: #262626;
            white-space:nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .desc{
            font-size: 12px;
            color: #8c8c8c;
        }
        .price{
            color: #eb4949;
            font-size: 14px;
        }
    }
}
.van-icon-up{
  color: #eb4949;
}
</style>
